<template>
	<view>
		<view style="width:90%;margin:10px auto">
			<u-form :model="form" ref="uForm" label-width="180">
				<u-form-item label="相册名称" prop="albumName"><u-input v-model="form.albumName" placeholder="取个有意义的名字"/></u-form-item>
				<u-form-item label="相册描述"><u-input v-model="form.description" placeholder="描述用来存哪一类照片"/></u-form-item>
				<u-form-item label="相册封面">
					<u-input :disabled="true" placeholder="上传相册封面" height="100" v-if="form.albumCover === ''"/>
					<u-icon name="camera-fill" size="50" @click="chooseAlbumCover" style="margin-right:12%" v-if="form.albumCover === ''"></u-icon>
					<view style="display: flex;flex-direction: row; align-items: center;">
						<u-image width="50px" height="50px" :src="src" style="margin-right: 12%;" v-if="form.albumCover !== ''" @click="chooseAlbumCover"></u-image>
					</view>
				</u-form-item>
				<u-button @click="addOrEditAlbum" type="primary" style="margin-top: 15px;">完成</u-button>
			</u-form>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			src:'',
			form: {
				id: undefined,
				albumName: '',
				description: '',
				albumCover: ''
			},
			rules: {
				albumName: [
					{
						required: true,
						message: '相册名称必填',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}
				]
			},
		};
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(options) {
		this.form.id = options.albumId
		if(this.form.id != undefined) {
			uni.setNavigationBarTitle({
				title: '编辑相册'
			});
			this.$request({
				url: '/life/album/query?albumId=' + this.form.id
			}).then(res => {
				this.form = res.data
				if(this.form.albumCover !== null  && this.form.albumCover !== '') {
					this.$request({
						url: '/minio/preview?fileName=' + this.form.albumCover
					}).then(response => {
						this.src = response.data
					})
				}
			})
		} else {
			uni.setNavigationBarTitle({
				title: '新建相册'
			});
		}
	},
	methods:{
		// 选择相册封面
		chooseAlbumCover(){
			uni.chooseImage({
				count: 1, //默认9
				success: res => {
					console.log(JSON.stringify(res.tempFilePaths));
					var tempFilePaths = res.tempFilePaths;
					uni.uploadFile({
						url: this.$BASE_URL + '/minio/uploadFile',
						filePath: tempFilePaths[0],
						name:'file',
						header: {'Authorization':this.$store.state.token},
						success: response => {
							uni.showToast({ title: "上传成功", icon: 'success' })
							const data = JSON.parse(response.data);
							this.form.albumCover = data.data
							this.src = tempFilePaths[0]
						}
					})
				}
			});
		},
		// 新建或者编辑相册
		addOrEditAlbum(){
			this.$refs.uForm.validate(valid => {
				if (valid) {
					//album为undefined时表示新增
					if(this.form.id === undefined) {
						this.$request({
							url: '/life/album/add',
							method: 'post',
							data: this.form
						}).then(res =>{
							console.log(res);
							this.$refs.uToast.show({
								title: '新建相册成功',
								type: 'success', 
								icon: true,
								url: '/pages/index',
								isTab:true,
								duration:1000
							})
							//触发事件
							// uni.$emit('getAlbumList',{msg:'页面更新'})
						}).catch((error) => {
							console.log(error);
						})
					} else {
						this.$request({
							url: '/life/album/edit',
							method: 'post',
							data: this.form
						}).then(res =>{
							console.log(res);
							this.$refs.uToast.show({
								title: '编辑相册成功',
								type: 'success', 
								icon: true,
								url: '/pages/index',
								isTab:true,
								duration:1000
							})
						}).catch((error) => {
							console.log(error);
						})
					}
				}
			});
		}
	}
};
</script>